<template>
  <div class="app-container">
    {{ objArr }}
    <el-row>
      <el-col :span="20">
        <el-button-group>
          <el-button type="primary" @click="add">新增</el-button>
        </el-button-group>
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          v-model="inptVal"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="sousuoClk"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="ExamList"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px"
      height="300"
      border
      size="mini"
    >
      <!-- @selection-change="handleSelectionChange" -->
      <el-table-column type="index" label="#" align="center"></el-table-column>
      <el-table-column
        prop="title"
        label="题目"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="cid"
        label="分类"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="uid"
        label="作者"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="date"
        label="发布时间"
        sortable
        show-overflow-tooltip
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="info" @click="details(scope.row)"
            >详情</el-button
          >
          <el-button size="mini" type="warning" @click="amend(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="Ondel(scope.row)"
            >删除</el-button
          >
        </template>
        <!-- @click="handleEdit(scope.$index, scope.row)" -->
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="0"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :size="'70%'"
      :visible.sync="drawer"
      :before-close="handleClose"
      :with-header="true"
      width="100"
    >
      <el-form
        :model="form"
        size="mine"
        style="padding: 0 5%"
        ref="form"
        label-width="100px"
        class="demo-form"
      >
        <el-form-item label="题目">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="form.cid" placeholder="请选择类别">
            <el-option
              v-for="(v, i) in classifyList"
              :key="i"
              :label="v.name"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选项">
          <div v-for="(v, i) in arr" :key="i" class="xuanxiang">
            <el-checkbox
              :label="v.index"
              name="type"
              v-model="v.checked"
              @change="setAnswer"
              :value="v.index"
            ></el-checkbox>
            <el-input
              type="textarea"
              style="width: 300px"
              autosize
              placeholder="请输入内容"
              v-model="v.value"
            >
            </el-input>
            <div
              v-show="title == '详情' ? false : true"
              v-if="arr.length - 1 === i"
            >
              <el-button
                type="success"
                @click="addIpt"
                icon="el-icon-plus"
                circle
              ></el-button>
              <el-button
                type="danger"
                @click="delIpt"
                icon="el-icon-minus"
                v-if="arr.length == 4 ? false : true"
                circle
              ></el-button>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="答案"> {{ this.newArr }} </el-form-item>
        <el-form-item label="答案提示">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.tips"
          >
          </el-input>
        </el-form-item>
        <el-button
          v-show="this.title == '详情' ? false : true"
          @click="OKfn"
          type="primary"
          >保存</el-button
        >
        <el-button @click="Nofn" type="info">取消</el-button>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { Handler } from "mockjs";
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      ipt: "",
      inptVal: "",
      list: [{}],
      drawer: false,
      title: "新增",
      direction: "rtl",
      textarea1: "",
      form: {
        uid: 1,
      },
      checked: "",
      zuozhe: "管理员",
      newArr: [],
      arr: [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false },
      ],
      num: 68,
    };
  },
  async mounted() {
    await this.setAnswer();
    await this.getExamlist();
    await this.getMsbdList();
  },
  methods: {
    ...mapActions("exam", ["getExamlist", "setExamData", "delData"]),
    ...mapMutations("exam", ["SET_CURRENTPAGE", "SET_PAGESIZE"]),
    ...mapActions("msbd", ["getMsbdList"]),
    sousuoClk() {
      this.getExamlist(this.inptVal);
    },
    async OKfn() {
      // let forms = this.form;
      this.drawer = false;
      this.form.options = JSON.stringify(this.arr);
      this.form.answers = JSON.stringify(this.newArr);
      await this.setExamData(this.form);
      await this.emptyArr();
      await this.getExamlist();
    },
    addIpt() {
      this.num++;
      this.arr.push({
        index: String.fromCharCode(this.num),
        value: "",
        checked: false,
      });
    },
    delIpt() {
      this.num--;
      this.arr.pop();
      this.setAnswer();
    },
    async handleSizeChange(val) {
      console.log(val);
      await this.SET_PAGESIZE(val);
      if (this.inptVal) {
        this.getExamlist(this.inptVal);
      } else {
        await this.getExamlist();
      }
    },
    //当前页数
    async handleCurrentChange(val) {
      console.log(val);
      await this.SET_CURRENTPAGE(val);
      if (this.inptVal) {
        this.getExamlist(this.inptVal);
      } else {
        await this.getExamlist();
      }
    },
    Onchecked() {
      this.setAnswer();
    },

    Nofn() {
      this.emptyArr();
      this.drawer = false;
    },
    emptyArr() {
      this.form = {
        uid: 1,
      };
      this.arr = [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false },
      ];
      this.newArr = [];
    },
    add() {
      this.title = "新增";
      this.drawer = true;
    },
    setAnswer() {
      let arr = this.arr;
      this.newArr = [];
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].checked == true) {
          this.newArr.push(arr[i].index);
          this.newArr = [...new Set(this.newArr)];
          console.log(this.newArr);
        }
      }
    },
    details(v) {
      this.form = v;
      this.arr = JSON.parse(this.form.options);
      this.newArr = JSON.parse(this.form.answers);
      this.drawer = true;
      this.title = "详情";
    },
    amend(v) {
      this.title = "修改";
      this.form = v;
      this.arr = JSON.parse(this.form.options);
      this.newArr = JSON.parse(this.form.answers);
      this.drawer = true;
    },
    async Ondel(v) {
      if (confirm("是否确定删除？")) {
        await this.delData(v.id);
        await this.getExamlist();
      } else {
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  computed: {
    ...mapState("exam", ["ExamList", "total"]),
    ...mapState("msbd", ["classifyList"]),
    objArr() {},
  },
  components: {},
  watch: {},
};
</script>

<style scoped>
.xuanxiang {
  display: flex;
  align-items: center;
}
</style>